<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/axios.js"></script>
    <script>
        const codeText= {
            "Network Error":"网络连接错误"
        }

        console.log(window.axios);

        function sendAjaxAxios(){
            // 1、调用axios方法发送异步请求
            // axios(options)
            //      options 取值对象数据，完成异步请求所需要的相关数据的定义（url……）
            //      方法将返回一个 根据异步请求状态完成切换的 promise 对象
            //            promise -> fulfilled 状态表示当前异步请求执行成功 ajaxState=4 && HttpState=200 
            //            promise -> rejected 状态表示当前异步请求执行失败 ajaxState!=4 || HttpState!=200 
            let p = axios({
                url:"http://127.0.0.1/filmApi/loadTyps.php",
                // method:"get"
                method:"post"
            });
            // console.log(p);
            // p.then(
            //     function(){
            //         // 请求成功的回调
            //         console.log("success");
            //     },
            //     function(){
            //         // 请求失败的回调
            //         console.log("error");
            //     }
            // );

            // ==>

            p.then(function(){
                // 请求成功的回调
                console.log("success");
            }).catch(function(){
                // 请求失败的回调
                console.log("error");
            })
        }

        function sendAjaxAxiosError(){
            axios({
                url:"http://127.0.0.1/filmApi/loadTyps.php11111",
                method:"post"
            })
            .then(function(){})
            // 回调函数中存在一个固定用于记录异步请求失败的 错误对象参数
            //     axios 的错误对象是基于 JS  Error构造函数构成的 信息记录对象
            //     而基于 Error 构成错误对象 原型内置属性 message 记录错误文本信息
            .catch(function(error){
                console.log(error);
                console.log(error.message);

                alert("请求失败:"+codeText[error.message])
            })
        }

        function sendAjaxAxiosSuccess(){
            axios({
                url:"http://127.0.0.1/filmApi/loadTyps.php",
                method:"post",
                // responseType:"text"
            })
            // 回调函数中存在一个固定用于记录异步请求成功 成功对象参数
            // 响应结果为一个基本对象包含如下属性
            //      config: 该axios的基本配置（会进行默认配置和传入配置的合并）
            //      headers: 当前请求服务器响应头
            //      request: XMLHttpRequest 当前axios 异步请求所使用的 原始ajax对象 XMLHttpRequest 的状态结果
            //      status: 当前请求的 HTTP 响应状态码
            //      statusText: 当前请求的 HTTP 响应状态文本
            //      data：当前请求成功后，后台响应的数据
            //                  该数据 axios 会自动尝试使用 JSON.parse 进行数据转换
            //                  可以转换 该属性为转换后的结果
            //                  如果不能转换以 原始文本方式返回
            .then(function(response){
                console.log(response);
                console.log(response.data);
                // document.querySelector("#list").innerHTML = response.data.msg

                // document.querySelector("#list").innerHTML = JSON.stringify(response.data);

                let divDom = document.querySelector("#list");
                for (let i = 0; i < response.data.result.length; i++) {
                    let pDom = document.createElement("p");
                    pDom.innerHTML = response.data.result[i].typeName;
                    divDom.appendChild(pDom);
                }
            })
            .catch(function(error){
                alert("请求失败:"+codeText[error.message])
            })
        }

        function sendAjaxAxiosSuccess2(){
            axios({
                url:"http://127.0.0.1/filmApi/loadTyps.php",
                method:"post",
            })
            .then(function({data:{ result }}){
                let divDom = document.querySelector("#list");
                for (let i = 0; i < result.length; i++) {
                    let pDom = document.createElement("p");
                    pDom.innerHTML = result[i].typeName;
                    divDom.appendChild(pDom);
                }
            })
            .catch(function(error){
                alert("请求失败:"+codeText[error.message])
            })
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="sendAjaxAxios()"><br><br>
    <input type="button" value="axios的错误信息处理" onclick="sendAjaxAxiosError()"><br><br>
    <input type="button" value="axios的成功信息处理" onclick="sendAjaxAxiosSuccess()"><br><br>
    <input type="button" value="axios的成功信息处理" onclick="sendAjaxAxiosSuccess2()"><br><br>
    <hr>
    <div id="list"></div>
</body>
</html>